<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="/module/plugin/gpy/qwebchannel.js"></script>
    <script src="/assets/plugins/jquery/jquery-1.10.2.min.js"></script>
    <script src="/module/config.js"></script>
    <script type="text/javascript">
        //BEGIN SETUP
        //拍照数据（base64）
        var baseUrl;
        var socket;
        //储存图片路径的变量和数组
        var imgPath = "";
        var imgPathArray = new Array();

        //预览图片
        function openImage(imageItem) {
            var url = imageItem.parentNode.id;
            window.showModalDialog(url, null, "dialogHeight:800px; dialogWidth:1000px; resizable:no");
        }


        function openSocket() {
            socket = new WebSocket(baseUrl);
            socket.onclose = function () {
                console.error("web channel closed");
            };
            socket.onerror = function (error) {
                console.error("web channel error: " + error);
            };
            socket.onopen = function () {
                output("WebSocket start connect");
                new QWebChannel(socket, function (channel) {
                    // make dialog object accessible globally
                    window.dialog = channel.objects.dialog;
                    //网页关闭函数
                    window.onbeforeunload = function () {
                        //发送关闭信号
                        dialog.get_actionType("closeSignal");
                        //关闭socket
                        socket.close();
                    }
                    window.onunload = function () {
                        //发送关闭信号
                        dialog.get_actionType("closeSignal");
                        //关闭socket
                        socket.close();
                    }
                    //分辨率列表点击
                    document.getElementById("resolutionList").onchange = function () {
                        //清除展示信息
                        var select = document.getElementById("resolutionList");
                        dialog.devChanged("primaryDev_:" + select.value);
                    };

                    //拍照按钮点击
                    document.getElementById("photographPri").onclick = function () {
                        dialog.photoBtnClicked("primaryDev_");
                        dialog.get_actionType("savePhotoPriDev");
                    };

					//上传按钮点击
					document.getElementById("upload").onclick = function () {
						upload();
					};

                    //属性设置
                    document.getElementById("showProperty").onclick = function () {
                        dialog.get_actionType("showProperty");
                    };

                    //服务器返回消息
                    dialog.sendPrintInfo.connect(function (message) {
                        //获取文件base64返回值
                        if (message.indexOf("fileBase64:") >= 0) {
                            var value = message.substr(11);
                            alert(value);
                            return;
                        }

                        output(message);

                        //设备分辨率
                        if (message.indexOf("priResolution:") >= 0) {
                            message = message.substr(14);
                            var select = document.getElementById("resolutionList");
                            select.add(new Option(message));
                            if (select.options.length > 1) {
                                select.selectedIndex = 1;
                            }
                        }
                        //图片保存后返回路径关键字savePhoto_success:
                        else if (message.indexOf("savePhoto_success:") >= 0) {
                            imgPath = message.substr(18);
                        }
                        //合成pdf成功，返回路径关键字composePDF_success:
                        else if (message.indexOf("composePDF_success:") >= 0) {
                            var path = message.substr(19);
                            removeAll();
                            alert(path);
                        }

                    });
                    //接收图片流用来展示，多个，较小的base64数据
                    dialog.send_priImgData.connect(function (message) {
                        var element = document.getElementById("bigPriDev");
                        element.src = "data:image/jpg;base64," + message;
                    });
                    //接收拍照base64
                    dialog.send_priPhotoData.connect(function (message) {
                        var element = document.getElementById("devPhoto");
                        element.src = "data:image/jpg;base64," + message;
                    });
                    output("ready to send/receive messages!");
                    //网页加载完成信号
                    dialog.html_loaded("one");
                });
            }
        }

        //输出信息
        function output(message) {
            var output = document.getElementById("output");
            output.innerHTML = output.innerHTML + message + "\n";
            output.scrollTop = output.scrollHeight;
        }

        //网页初始化函数
        window.onload = function () {
            baseUrl = "ws://127.0.0.1:12345";
            output("Connecting at " + baseUrl + ".");
            openSocket();
        }
        var files=[];
        //上传
        function upload() {
        	var base64 = document.getElementById("devPhoto").src;
        	if(!base64){
               alert("请先拍照再上传");
               return;
            }
            $.ajax({
                url: config.base_server() + 'common/upload/base64?access_token=' + config.getToken().access_token,
                type: "post",
                data: {file: base64},
                dataType: "json",
                async: false,
                success: function (result) {
                    if (result != null) {
                        files.push(result.data) ;
                        alert("上传成功")
                    }
                }
            });
        }

        // 保存数据
        acceptClick = function (callBack) {
            callBack(files);
            return true;
        };

        //END SETUP
    </script>
    <style type="text/css">
        html {
            height: 100%;
            width: 100%;
        }

        #input {
            width: 400px;
            margin: 0 10px 0 0;
        }

        #output {
            width: 500px;
            height: 200px;
            margin: 0 10px 0 0;
        }

    </style>
</head>
<body>
<tr>
    <img id="bigPriDev" width="480" height="410"/></img>
    <img id="devPhoto" width="480" height="410"/></img>
    <textarea id="output" style="display:none;"></textarea><br/>
    <br/>
</tr>
<tr>
    <select id="resolutionList" style="width: 120px"></select>
    <input id="showProperty" type="button" value="属性设置"/>
    <input id="photographPri" type="button" value="拍照"/>
	<input id="upload" type="button" value="上传"/>
    <div id="container" style="float:left;"></div>
    </td>
</tr>
</body>
</html>
